<template>
  <view class="h-100vh overflow-hidden bg-white">
    <!-- 固定头部 -->
    <view class="flex-none">
      <S1Header title="货主批次" :on-back="onBack" />
      <!-- 搜索框 -->
      <view class="bg-white px-[15rpx] py-[15rpx]">
        <view class="h-[80rpx] flex items-center rounded-[40rpx] bg-[#F5F7FA]">
          <image
            src="https://ceshiweb.picaime.com/static/images/search.png"
            class="ml-[20rpx] h-[36rpx] w-[36rpx] object-contain"
          />
          <input
            v-model="keyword"
            class="flex-1 px-[10rpx] text-[28rpx] text-[#333] font-sans"
            placeholder="搜索货主或批次"
            confirm-type="search"
            @confirm="onSearch"
          >
        </view>
      </view>
      <!-- 下面的按钮 -->
      <view
        class="mx-[15rpx] flex overflow-hidden rounded-[10rpx] bg-[#F5F7FA]"
      >
        <view
          class="flex-1 p-[20rpx] text-center text-[28rpx] transition-all duration-300 ease"
          :class="
            activeTab === 0
              ? 'bg-[#43cf7c] text-white font-medium'
              : 'text-[#808080]'
          "
          @click="changeTab(0)"
        >
          全部
        </view>
        <view
          class="flex-1 p-[20rpx] text-center text-[28rpx] transition-all duration-300 ease"
          :class="
            activeTab === 1
              ? 'bg-[#43cf7c] text-white font-medium'
              : 'text-[#808080]'
          "
          @click="changeTab(1)"
        >
          在售
        </view>
        <view
          class="flex-1 p-[20rpx] text-center text-[28rpx] transition-all duration-300 ease"
          :class="
            activeTab === 2
              ? 'bg-[#43cf7c] text-white font-medium'
              : 'text-[#808080]'
          "
          @click="changeTab(2)"
        >
          售完
        </view>
        <view
          class="flex-1 p-[20rpx] text-center text-[28rpx] transition-all duration-300 ease"
          :class="
            activeTab === 3
              ? 'bg-[#43cf7c] text-white font-medium'
              : 'text-[#808080]'
          "
          @click="changeTab(3)"
        >
          结完
        </view>
      </view>
      <!-- 批次信息 -->
      <view class="p-[20rpx] text-[28rpx] text-[#808080]">
        共<text class="mx-[5rpx] text-[#FF8D1A]">
          {{ totalOwe }}
        </text>个批次, 共<text class="mx-[5rpx] text-[#FF8D1A]">
          {{
            totalBuyers
          }}
        </text>个货主
      </view>
    </view>

    <!-- 可滚动列表 -->
    <scroll-view
      scroll-y
      class="max-h-[calc(100vh-80rpx)] flex-1 px-[15rpx]"
      refresher-enabled
      :refresher-triggered="refresherTriggered"
      @refresherrefresh="onRefresh"
    >
      <view
        v-for="item in filteredProducts"
        :key="item.id"
        class="relative mb-[15rpx] rounded-[10rpx] bg-white p-[30rpx] shadow-[0_2px_10px_rgba(0,0,0,0.05)]"
      >
        <view class="flex items-center justify-between">
          <view class="flex items-center">
            <view class="text-[32rpx] text-[#000] font-medium">
              {{
                item.huozhu_name
              }}
            </view>
            <view
              class="ml-[15rpx] rounded-[8rpx] bg-[#43cf7c] px-[15rpx] py-[5rpx] text-[24rpx] text-white leading-[28rpx]"
            >
              {{ item.pici }}
            </view>
          </view>
          <view
            class="rounded-[6rpx] px-[15rpx] py-[5rpx] text-[24rpx]"
            :class="getStatusClass(item.status)"
          >
            {{ getStatusText(item.status) }}
          </view>
        </view>

        <!-- 时间 -->
        <view class="mt-[20rpx] text-[24rpx] text-[#A6A6A6]">
          {{ item.time }}
        </view>

        <!-- 详情 -->
        <view
          class="absolute bottom-[30rpx] right-[20rpx] flex items-center text-[#9A9CA1]"
          @click="goBatchDetail(item)"
        >
          <text class="mr-[5rpx] text-[28rpx]">
            详情
          </text>
          <image
            src="https://ceshiweb.picaime.com/static/images/report/right.png"
            class="h-[24rpx] w-[24rpx]"
          />
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { getAllPiciData } from '@/api/order';
import S1Header from '@/components/S1Header.vue';

interface Huozhu {
  id: number;
  lxr_name: string;
  lxr_tel: string;
  dp_name: string;
  dp_logo: string;
}

interface Product {
  id: number;
  huozhu_id: number;
  huozhu_name: string;
  pici: number;
  status: number;
  time: string;
  huozhu: Huozhu;
}

const products = ref<Product[]>([]);
const loading = ref(false);
const refresherTriggered = ref(false);

const fetchProducts = async (status: number) => {
  try {
    loading.value = true;
    const res = await getAllPiciData({
      status,
    });
    if (res.code === 200) {
      products.value = res.data;
    }
  }
  catch (error) {
    console.error('获取批次数据失败:', error);
  }
  finally {
    loading.value = false;
    refresherTriggered.value = false;
  }
};

onMounted(() => {
  fetchProducts(0);
});

const onBack = (): void => {
  uni.navigateBack();
};

const keyword = ref<string>('');

const onSearch = (): void => {
  fetchProducts(activeTab.value);
};

// 下拉刷新
const onRefresh = (): void => {
  refresherTriggered.value = true;
  fetchProducts(activeTab.value);
};

// 监听关键词变化
watch(keyword, (newVal) => {
  fetchProducts(activeTab.value);
});

const toggleFilter = (): void => {
  console.log('切换筛选');
};

// 按钮
const activeTab = ref<number>(0);

const changeTab = (tabIndex: number): void => {
  activeTab.value = tabIndex;
  fetchProducts(tabIndex);
};

const filteredProducts = computed<Product[]>(() => {
  return products.value;
});

// 批次信息
const totalOwe = computed(() => products.value.length);
const totalBuyers = computed(() => {
  const uniqueBuyers = new Set(products.value.map(item => item.huozhu_id));
  return uniqueBuyers.size;
});

// 状态样式
const getStatusClass = (status: number): string => {
  switch (status) {
    case 1:
      return 'bg-[rgba(209,255,227,1)] text-[#43cf7c]';
    case 2:
      return 'bg-[rgba(250,207,165,1)] text-[#FF8D1A]';
    case 3:
      return 'bg-[rgba(180,225,255,1)] text-[#0080ff]';
    default:
      return 'bg-[rgba(228,218,250,1)] text-[#9966ff]';
  }
};

const getStatusText = (status: number): string => {
  switch (status) {
    case 1:
      return '在售';
    case 2:
      return '售完';
    case 3:
      return '结完';
    default:
      return '未知';
  }
};

// 跳转到批次详情页面
const goBatchDetail = (item: Product): void => {
  uni.navigateTo({
    url: `/pages/common/batchDetail/index?id=${item.id}`,
  });
};
</script>
